<template>
  <a-card>
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="系统">
              <a-select v-model="queryParam.systemId" placeholder="请选择" allowClear>
                <a-select-option v-for="type in systemOptions" :key="type.value" :value="type.value">{{ type.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <!-- <a-col :md="8" :sm="24">
            <a-form-item label="平台">
              <a-select v-model="queryParam.domain" placeholder="请选择">
                <a-select-option v-for="type in domainOptions" :key="type.value" :value="type.value">{{ type.label }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :md="8" :sm="24">
            <a-form-item label="事件ID">
              <a-input v-model="queryParam.eventId" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="事件说明">
              <a-input v-model="queryParam.eventName" placeholder=""/>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <span class="table-page-search-submitButtons">
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAdd()">新建事件</a-button>
    </div>

    <s-table
      ref="table"
      size="default"
      :rowKey="(record) => record.id"
      :columns="columns"
      :data="loadData"
    >
      <span slot="createTime" slot-scope="text">{{ text | moment }}</span>
      <span slot="systemId" slot-scope="text">{{ text | enumValueByKey($const.SYSTEM_TYPE) }}</span>
      <!-- <span slot="domain" slot-scope="text">{{ text | enumValueByKey($const.DOMAIN_TYPE) }}</span> -->
      <span slot="eventType" slot-scope="text">{{ text | enumValueByKey($const.EVENT_TYPE) }}</span>
      <span slot="action" slot-scope="text, record">
        <template>
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-popconfirm title="是否确认删除？" @confirm="handleDelete(record)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </span>
    </s-table>

    <AddEventModal
      ref="collectionForm"
      :visible.sync="addVisible"
      :title="editType == 1 ? '编辑事件' : '新建事件'"
      :initialFormValue="formValue"
      @cancel="handleCancel"
      @submit="handleOk">

    </AddEventModal>
  </a-card>
</template>

<script>

import AddEventModal from './AddEventModal.vue'
import { addEvent, deleteEvent, getEventList, updateEvent } from '@/api/system/systemlog'

export default {
  props: {

  },
  components: {
    AddEventModal
  },
  data () {
    return {
      systemOptions: [
        { label: this.$const.SYSTEM_TYPE.PAYMENT.desc, value: this.$const.SYSTEM_TYPE.PAYMENT.value },
        { label: this.$const.SYSTEM_TYPE.CONSENT.desc, value: this.$const.SYSTEM_TYPE.CONSENT.value },
        { label: this.$const.SYSTEM_TYPE.SOURCE.desc, value: this.$const.SYSTEM_TYPE.SOURCE.value }
      ],
      domainOptions: [
        { label: this.$const.DOMAIN_TYPE.PC.desc, value: this.$const.DOMAIN_TYPE.PC.value },
        { label: this.$const.DOMAIN_TYPE.MP.desc, value: this.$const.DOMAIN_TYPE.MP.value },
        { label: this.$const.DOMAIN_TYPE.PAD.desc, value: this.$const.DOMAIN_TYPE.PAD.value }
      ],
      addVisible: false,
      editType: 0, // 0: 添加  1: 编辑
      defFormValue: {
        systemId: '',
        domain: '',
        eventId: '',
        eventType: '',
        eventName: ''
      },
      formValue: {
        systemId: '',
        domain: '',
        eventId: '',
        eventType: '',
        eventName: ''
      },
      queryParam: {
        type: this.activeIndex
      },
      loadData: parameter => {
        console.log('loadData.parameter', this.queryParam)
        return getEventList(Object.assign(parameter, this.queryParam)).then(res => {
          return res
        })
      },
      // 表头
      columns: [
        {
          title: '编号',
          dataIndex: 'id'
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' }
        },
        {
          title: '系统',
          dataIndex: 'systemId',
          scopedSlots: { customRender: 'systemId' }
        },
        // {
        //   title: '平台',
        //   dataIndex: 'domain',
        //   scopedSlots: { customRender: 'domain' }
        // },
        {
          title: '事件ID',
          dataIndex: 'eventId'
        },
        {
          title: '事件类型',
          dataIndex: 'eventType',
          scopedSlots: { customRender: 'eventType' }
        },
        {
          title: '事件描述',
          dataIndex: 'eventName'
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: '150px',
          scopedSlots: { customRender: 'action' }
        }
      ]
    }
  },
  mounted () {

  },
  methods: {
    handleAdd () {
      this.addVisible = true
      this.editType = 0
    },
    handleEdit (record) {
      this.formValue = record
      this.addVisible = true
      this.editType = 1
    },
    handleCancel () {
      const form = this.$refs.collectionForm.form
      form.resetFields()
      this.formValue = this.defFormValue
      this.addVisible = false
    },
    handleOk () {
      const form = this.$refs.collectionForm.form
      form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          if (this.editType === 0) {
            addEvent(values).then(res => {
              this.confirmLoading = false
              this.$message.success('操作成功！')
              this.handleCancel()
              this.$refs.table.refresh(true)
            }).catch(_ => {

            })
          } else {
            updateEvent(values).then(res => {
              this.$message.success('操作成功！')
              this.handleCancel()
              this.$refs.table.refresh(true)
            }).catch(_ => {

            })
          }
        }
      })
    },
    handleDelete (record) {
      deleteEvent({
        id: record.id
      }).then(res => {
        console.log(res)
        this.$message.success('操作成功')
        this.$refs.table.refresh(true)
      })
    }
  }
}
</script>

<style>

</style>
